<!-- 上传图片 -->
<template>
    <div class="flex flex-wrap">
        <div v-for="item, index in imgList" :key="index" class="w-50 h-50 mr-2">
            <img :src="item.path" alt="">
        </div>
    </div>
    <el-upload class="upload-demo" drag action="/api/uploads/img" :headers="getHeads" multiple name="avatar"
        :on-success="onSuccess">
        <el-icon class="el-icon--upload">
            <Plus />
        </el-icon>
        <div class="el-upload__text">点击或拖拽文件到此处上传</div>
        <div class="el-upload__text">支持jpg、png、gif</div>
        <template #tip>
            <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
            </div>
        </template>
    </el-upload>
</template>

<script setup lang="ts">
import { Plus } from '@element-plus/icons-vue'
import api from '../../api';
import { reactive, ref } from 'vue';
import { onMounted } from 'vue';


//图片列表
const imgList = ref()

// 获取token
let data = window.sessionStorage.getItem('userInfo') || '{}'
const { token = '' } = JSON.parse(data)

// 设置请求头
const getHeads = reactive({
    'Authorization': `Bearer ${token}`  // Bearer 前缀 + token
})

// 文件上传成功时的钩子
const onSuccess = () => {
    api.upLoadImgApi().then((res: any) => {
        console.log(res);
        imgList.value = res
    })
}

onMounted(() => {
    onSuccess()
})
</script>

<style scoped></style>